<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <!-- css -->
    <link rel="stylesheet" type="text/css" href="../css/base.css" />
    <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="../css/font-awesome/css/font-awesome.min.css" />
    <style>
        .rightContainer_bottom {
            height: 100%;
        }

        html,
        body,
        .container-fluid,
        .maxHeight {
            padding: 0;
            height: 100%;
            width: 100%;
        }
    </style>

    <!-- js -->
    <script type="text/javascript" src="../js/plug-ins/jquery.min.js"></script>
    <script type="text/javascript" src="../js/plug-ins/echarts.js"></script>
    <script type="text/javascript" src="../js/plug-ins/bootstrap.min.js"></script>
    <script type="text/javascript" src="../js/plug-ins/vue.js"></script>
    <script type="text/javascript" src="../js/source/template1.js"></script>
    <script type="text/javascript" src="../js/plug-ins/d3.js"></script>
    <script type="text/javascript" src="../js/source/base.js"></script>
    <script type="text/javascript" src="../js/plug-ins/jquery.nicescroll/jquery.nicescroll.js"></script>

    <script>
        $(function () {

            var data = [{
                    value: "ID号",
                    type: "label"
                },
                {
                    value: "201900227",
                    type: "text"
                },
                {
                    value: "联系电话",
                    type: "label"
                },
                {
                    value: "13589642158",
                    type: "text"
                },
                {
                    value: "训练时间",
                    type: "label"
                },
                {
                    value: "2019-12-12--16:58",
                    type: "text"
                },
                {
                    value: "信息",
                    type: "label"
                },
                {
                    value: "全香菇最靓的仔",
                    type: "text"
                }
            ];

            bindLeftData(data);

            gradeCharts();
  
            percentageofSports();

            drawPathSVG("#echart_sportRecord",null,'评估范围');
        });
    </script>
</head>

<body>
    <div class="container-fluid">
        <div class="row maxHeight">
            <div class="col-lg-2 col-sm-12 leftContainer">
                <div>
                    <span class="fa-stack fa-lg fa-5x">
                        <i class="fa fa-user-o fa-stack-1x" aria-hidden="true"></i>
                        <i class="fa fa-square-o fa-stack-2x" style="color: #888691;"></i>
                    </span>

                    <span id="pat">
                        <span id="pat_name">{{Name}}</span>
                        <span id="pat_sex">{{Sex}}</span>
                    </span>
                </div>
                <ul id="leftBaseInfo">
                    <li v-for="item in items">
                        <label class="one" v-if="item.type=='label'">{{item.value}}</label>
                        <label class="two" v-else>{{item.value}}</label>
                    </li>
                </ul>
            </div>

            <div class="col-lg-10 col-sm-12 rightContainer">
                <div class="row rightContainer_bottom">
                    <div class="row" style="height: 4%;margin:10px 0 0 30px;">
                        <button class="basebotton">
                            <span class="basebottonText">
                                <i class="fa fa-bar-chart" aria-hidden="true"></i>
                                结果分析
                            </span>
                        </button>
                    </div>
                    <div class="row" style="width: 100%;margin: 15px;height: 93%;">
                        <div class="col-lg-12 col-sm-12">
                            <div class="row" style="height: 50%;">
                                <div class="col-lg-6 col-md-6">
                                    <div id="echart_gradeRecord" class="myEchars"></div>
                                </div>
                                <div class="col-lg-6 col-md-6">
                                        <p class="name"></p>
                                    <div id="echart_sportRecord" class="myEchars"></div>
                                </div>
                            </div>

                            <div class="row" style="height: 50%;">
                                <div class="col-lg-6 col-md-6">
                                    <button class="basebotton" style="position: relative;top:20px;left:30px;">
                                        <span class="basebottonText">
                                            <i class="fa fa-pencil-square-o" aria-hidden="true"></i>
                                            备注
                                        </span>
                                    </button>
                                    <textarea style="width:100%;height:80%;padding-top: 30px;" placeholder="相关备注信息"
                                        disabled></textarea>
                                </div>
                                <div class="col-lg-6 col-md-6">
                                    <div id="echart_Percentageofsports" class="myEchars"></div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</body>

</html>